<script setup lang="ts">
import { computed } from 'vue';
import { message } from 'ant-design-vue';
import { CopyOutlined } from '@ant-design/icons-vue';
import type { ProblemVO } from '@/api/Problem.ts';

const props = defineProps<{
  problemData: ProblemVO | null;
  loading: boolean;
}>();

// 复制功能
const copyToClipboard = async (text: string, type: string) => {
  try {
    await navigator.clipboard.writeText(text);
    message.success(`${type}已复制到剪贴板`);
  } catch (err) {
    message.error('复制失败，请手动复制');
  }
};

// 难度标签配置
const difficultyConfig = computed(() => {
  const difficulty = props.problemData?.difficulty ?? 0;
  const configs = [
    {
      color: 'green',
      text: '简单',
      bgClass: 'bg-emerald-50',
      textClass: 'text-emerald-700',
      borderClass: 'border-emerald-200'
    },
    {
      color: 'orange',
      text: '中等',
      bgClass: 'bg-amber-50',
      textClass: 'text-amber-700',
      borderClass: 'border-amber-200'
    },
    {
      color: 'red',
      text: '困难',
      bgClass: 'bg-rose-50',
      textClass: 'text-rose-700',
      borderClass: 'border-rose-200'
    },
  ];
  return configs[difficulty] || configs[0];
});
</script>

<template>
  <div class="w-full h-full flex flex-col">
    <!-- 标题区域 -->
    <div class="problem-header px-6 py-5 border-b border-gray-100 bg-gradient-to-r from-white to-gray-50/50">
      <div class="flex items-center gap-3 mb-3">
        <h1 class="text-2xl font-bold text-gray-800 leading-tight">
          {{ problemData?.title || '加载中...' }}
        </h1>
      </div>
      <div class="flex items-center gap-3">
        <span
          v-if="problemData"
          :class="[
            'px-3 py-1 rounded-full text-xs font-semibold border',
            difficultyConfig.bgClass,
            difficultyConfig.textClass,
            difficultyConfig.borderClass
          ]"
        >
          {{ difficultyConfig.text }}
        </span>
        <!-- 限制条件标签 -->
        <div class="flex items-center gap-3 ml-auto text-xs">
          <div class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg border border-blue-100">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="font-medium">时间限制：{{ problemData?.judgeConfig?.timeLimit || 0 }} ms</span>
          </div>
          <div class="flex items-center gap-1.5 px-3 py-1.5 bg-purple-50 text-purple-700 rounded-lg border border-purple-100">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
            </svg>
            <span class="font-medium">空间限制：{{ problemData?.judgeConfig?.memoryLimit || 0 }} MB</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="flex-1 overflow-y-auto px-6 py-5 custom-scrollbar">
      <template v-if="loading">
        <div class="flex items-center justify-center h-full">
          <a-spin size="large" tip="加载题目信息..." />
        </div>
      </template>
      <template v-else-if="problemData">
        <div class="space-y-4">
          <!-- 题目描述卡片 -->
          <a-card size="small" class="problem-section-card shadow-sm" :bordered="true">
            <template #title>
              <div class="flex items-center gap-2">
                <span class="w-1 h-4 bg-blue-500 rounded-full"></span>
                <span class="text-sm font-semibold text-gray-800">题目描述</span>
              </div>
            </template>
            <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
              {{ problemData.description }}
            </div>
          </a-card>

          <!-- 输入描述卡片 -->
          <a-card size="small" class="problem-section-card shadow-sm" :bordered="true">
            <template #title>
              <div class="flex items-center gap-2">
                <span class="w-1 h-4 bg-green-500 rounded-full"></span>
                <span class="text-sm font-semibold text-gray-800">输入描述</span>
              </div>
            </template>
            <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
              {{ problemData.inputDescription }}
            </div>
          </a-card>

          <!-- 输出描述卡片 -->
          <a-card size="small" class="problem-section-card shadow-sm" :bordered="true">
            <template #title>
              <div class="flex items-center gap-2">
                <span class="w-1 h-4 bg-orange-500 rounded-full"></span>
                <span class="text-sm font-semibold text-gray-800">输出描述</span>
              </div>
            </template>
            <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap">
              {{ problemData.outputDescription }}
            </div>
          </a-card>

          <!-- 样例卡片 -->
          <a-card size="small" class="problem-section-card shadow-sm" :bordered="true">
            <template #title>
              <div class="flex items-center gap-2">
                <span class="w-1 h-4 bg-purple-500 rounded-full"></span>
                <span class="text-sm font-semibold text-gray-800">样例</span>
              </div>
            </template>
            <div class="space-y-4">
              <!-- 样例输入 -->
              <div class="group">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">输入</span>
                  <button
                    @click="copyToClipboard(problemData?.sampleInput || '', '样例输入')"
                    class="flex items-center gap-1.5 px-2.5 py-1 text-xs text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-all duration-200"
                  >
                    <CopyOutlined class="text-xs" />
                    <span>复制</span>
                  </button>
                </div>
                <pre class="bg-gradient-to-br from-gray-50 to-gray-100/50 px-4 py-3 rounded-lg border border-gray-200 text-xs font-mono text-gray-800 overflow-x-auto leading-relaxed shadow-sm">{{ problemData.sampleInput }}</pre>
              </div>

              <!-- 样例输出 -->
              <div class="group">
                <div class="flex items-center justify-between mb-2">
                  <span class="text-xs font-semibold text-gray-600 uppercase tracking-wide">输出</span>
                  <button
                    @click="copyToClipboard(problemData?.sampleOutput || '', '样例输出')"
                    class="flex items-center gap-1.5 px-2.5 py-1 text-xs text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-md transition-all duration-200"
                  >
                    <CopyOutlined class="text-xs" />
                    <span>复制</span>
                  </button>
                </div>
                <pre class="bg-gradient-to-br from-gray-50 to-gray-100/50 px-4 py-3 rounded-lg border border-gray-200 text-xs font-mono text-gray-800 overflow-x-auto leading-relaxed shadow-sm">{{ problemData.sampleOutput }}</pre>
              </div>
            </div>
          </a-card>

          <!-- 提示卡片 -->
          <a-card
            v-if="problemData.hint"
            size="small"
            class="problem-section-card shadow-sm"
            :bordered="true"
          >
            <template #title>
              <div class="flex items-center gap-2">
                <span class="w-1 h-4 bg-yellow-500 rounded-full"></span>
                <span class="text-sm font-semibold text-gray-800">提示</span>
              </div>
            </template>
            <div class="text-sm text-gray-700 leading-relaxed whitespace-pre-wrap bg-yellow-50/30 p-3 rounded-lg">
              {{ problemData.hint }}
            </div>
          </a-card>
        </div>
      </template>
      <template v-else>
        <div class="flex items-center justify-center h-full">
          <a-empty description="题目信息加载失败" />
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
  transition: background 0.2s;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.custom-scrollbar {
  scroll-behavior: smooth;
}

pre {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
</style>
